<template>
<div class="not-found-container">
    <div class="not-found-content">
        <div class="error-code">404</div>
        <div class="error-description">你访问的页面不见了</div>
        <div class="countdown">{{ countdown }}秒后自动跳转到首页</div>
        <div class="back-btn">
            <van-button round type="primary" @click="goToHome()">
                返回首页
            </van-button>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'NotFound',
    metaInfo: {
        title: '404 - 页面不存在'
    },
    data() {
        return {
            countdown: 5,
            timer: null,
            source: ''
        }
    },
    created() {
        // 从查询参数中获取source
        if (this.$route.query.source) {
            this.source = decodeURIComponent(this.$route.query.source);
        } else if (this.$route.params.source) {
            // 兼容旧的路径参数方式
            this.source = '/' + this.$route.params.source;
        }
        this.startTimer()
    },
    beforeDestroy() {
        // 清除定时器
        if (this.timer) {
            clearInterval(this.timer)
        }
    },
    methods: {
        startTimer() {
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--
                } else {
                    clearInterval(this.timer)
                    this.goToHome()
                }
            }, 1000)
        },
        goToHome() {
            // 重定向到home页面并带上source=404参数
            this.$router.push({
                path: '/home',
                query: { source: '404' },
                replace: true
            }).catch(err => {
                console.error('导航失败:', err)
            })
        }
    }
}
</script>

<style scoped>
.not-found-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f8fa;
}

.not-found-content {
    text-align: center;
    padding: 30px;
}

.error-code {
    font-size: 80px;
    font-weight: bold;
    color: #1989fa;
    margin-bottom: 20px;
}

.error-message {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.error-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.source-path {
    color: #1989fa;
    font-weight: bold;
}

.countdown {
    font-size: 16px;
    color: #999;
    margin-bottom: 15px;
}

.back-btn {
    margin-top: 20px;
}
</style>